<template>
  <div>
    <myheader title="资讯详情">
      <template #left>
        <div @click="$router.go(-1)">
          <van-icon name="arrow-left" />
          返回
        </div>
      </template>
    </myheader>
    <div class="mate">
      <div class="newsTitle">{{ newscontents.title }}</div>
      <p>
        <span>{{ newscontents.add_time | newsDateFilter }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ newscontents.click }}&nbsp;次浏览</span>
        &nbsp;&nbsp;
        <span>&nbsp;分类：经济民生</span>
      </p>
    </div>

    <div class="content" v-html="newscontent"></div>
    <div class="commenttitle"></div>

    <comment :commentList="commentList" @click="publish"></comment>

    <van-button
      plain
      hairline
      type="danger"
      size="large"
      @click="loadMore"
      v-if="haveMore"
      >加载更多</van-button
    >

    <van-button
      plain
      hairline
      type="danger"
      size="large"
      @click="loadMore"
      v-else
      >没有更多</van-button
    >
  </div>
</template>

<script>
import comment from "@/components/comment";
import { getcomments, postcomments } from "../../Api/comment";
import myheader from "@/components/myheader.vue";
import { getNewsDetial } from "../../Api/post";
import { newsDateFilter } from "@/utils/filter";
export default {
  // 注册
  components: {
    comment,
    myheader,
  },
  filters: {
    newsDateFilter,
  },
  data() {
    return {
      newscontents: "",
      newscontent: [],
      commentList: [],
      pageindex: 1,
      haveMore: true, //是否还有更多数据
    };
  },
  async mounted() {
    let id = this.$route.params.id;
    let res = await getNewsDetial(id);
    this.newscontents = res.data.message[0];
    this.newscontent = res.data.message[0].content;

    this.init();
  },
  methods: {
    async publish(comment) {
      if (comment == "") {
        this.$toast("不能留空");
        return;
      } else {
        let res = await postcomments(this.$route.params.id, {
          content: comment,
        });
        let id = this.$route.params.id;
        let res2 = await getcomments(id, 1);
        // console.log(res);
        this.commentList = res2.data.message;
      }
    },

    async init() {
      let id = this.$route.params.id;
      let res = await getcomments(id, this.pageindex);
      // console.log(res);
      this.commentList = res.data.message;
    },

    // 点击加载更多
    async loadMore() {
      this.pageindex++;
      // this.init();
      let id = this.$route.params.id;
      let res = await getcomments(id, this.pageindex);
      this.commentList.push(...res.data.message);
      if (res.data.message.length < 10) {
        this.haveMore = false;
      }
      // console.log(this.commentList);
    },
  },
};
</script>

<style lang="less" scoped>
.van-icon {
  vertical-align: text-bottom;
}
.mate {
  margin: 1em auto auto;
  padding-bottom: 10px;
  padding-left: 5px;
  border-bottom: 1px solid #eee;

  .newsTitle {
    color: #0088d1;
    font-size: 19px;
    margin: 0 0 10px;
    font-weight: 700;
  }
  p {
    margin-bottom: 10px;
    font-size: 12px;
    color: #999;
  }
}
.content {
  padding: 5px;
  font-size: 14px;
  margin-top: 0;
  line-height: 21px;

  color: #5c5c5c;
  /deep/ p {
    display: block;
    margin-bottom: 10px;
    b {
      font-weight: 700;
    }
  }
}
// 加载更多
.htmlLoad {
  color: #f58f8a;
  border: 2px solid #f16767;
  font-size: 18px;
  margin-bottom: 60px;
}
</style>
